<template>
  <div class="iscroll_swiper_container">
      <div class="iscroll_swiper_wrapper">
          <!-- 专栏跳转 -->
          <div class="iscroll_swiper_title" @click="toselected">精选专栏</div>
          <!-- iscroll滑动 -->
          <div class="iscroll_swiper_iscroll_container">
            <div class="iscroll_swiper_iscroll"
             v-for="(item,index) in newIscroll" 
            :key="index"
            @click="goSpecial(item.id)"
            >
                <img :src="item.pic" >
				<span>{{item.title}}</span>
				<p class="descript">{{item.descript}}</p>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
import PATH from "../../router/constant"
export default {
    data(){
        return{
            newIscroll:[]
        }
    },
    mounted(){
        this.$CLIENT.getSpecial().then(res=>{
            this.newIscroll = res.data.data
        })
    },
    methods:{
        // 跳转专栏列表页面
        toselected(){
            this.$router.goNext(PATH.SPECIAL)
        },
        // 专栏详情
        goSpecial(id){
            this.$router.goNext({path:PATH.SELETED,query:{id}})
        }
    }
}
</script>

<style scoped>
.iscroll_swiper_container
{
    width: 100%;
    height: 330px;
    /* background-color: red; */
    border-bottom: 0.5rem solid #eee;
}

.iscroll_swiper_wrapper
{
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.iscroll_swiper_title
{
    width: 100%;
    height: 45px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    background-color: #fff;
    color: #666;
}

.iscroll_swiper_iscroll_container
{
    width: 100%;
	height: 270px;
	overflow: scroll;
	display: flex;
}

.iscroll_swiper_iscroll
{
    width: 350px;
	height: 210px;
	margin-top: -15px;
	font-size: 0.6rem;
	margin-left: 10px;
}

.iscroll_swiper_iscroll img
{
    width: 350px;
	height: 100%;
}

.descript
{
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    font-size: 14px;
    color: gray;
}
</style>